✨ 주요 변경사항

• 전체 페이지 모바일 반응형 UI 적용
• 공용 컴포넌트(Card, TradeItem, Modal 등) 반응형 스타일 수정
• 탭 컴포넌트 cursor-pointer 추가
• 새로운 훅(useBodyScrollLock, useScrolled) 추가

📝 작업 상세 내용

반응형 레이아웃

• 페이지 컨테이너 패딩: px-(--margin-l) md:px-xxxl lg:px-0
• Card: 모바일에서 w-full h-auto, 데스크탑에서 고정 크기
• TradeItem: 모바일에서 축소된 패딩/이미지 크기 적용
• CommonTabs: 모바일 grid, 데스크탑 flex 레이아웃 분리

UX 개선

• MyPageTabs, CommonTabs 버튼에 cursor-pointer 추가

✅ 체크리스트

• PR 본문에 Close #번호 추가
• 불필요한 주석, 디버깅 코드 제거
• 기능 테스트 및 정상 동작 확인
• 커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

마이페이지(모바일)

구매하기 페이지(모바일)

챗봇페이지(모바일)

수리점페이지(모바일)

🔍 기타 참고사항

• Tailwind v4 CSS 변수 단축 문법 사용: px-(--margin-l)
• spacing 토큰 사용: gap-xxxxs (4px)

🔗 관련 이슈

• Close [Refactor] #78 - UI 수정 및 리팩토링 #78